.button-group {
	.button {
		border-left-width: 0;
		border-radius: 0;

		&:focus {
			// fixes focus styles in stacking context
			position: relative;
			z-index: z-index( 'button-group-parent', '.button-group .button:focus' );
		}
	}

	.button:first-child {
		border-left-width: 1px;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
		&:active {
			border-right-width: 0;
		}
	}

	.button:last-child {
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
		&:active {
			border-left-width: 0;
		}
	}

	.section-header & .button {
		margin-right: 0;
	}

	&.is-primary {
		&.is-busy {
			background-size: 120px 100%;
			background-image: linear-gradient(
				-45deg,
				var( --color-accent ) 28%,
				var( --color-accent-60 ) 28%,
				var( --color-accent-60 ) 72%,
				var( --color-accent ) 72%
			);
		}
	}

	&.is-busy {
		animation: button__busy-animation 3000ms infinite linear;
		background-size: 120px 100%;
		background-image: linear-gradient( -45deg, var( --color-neutral-0 ) 28%, var( --color-surface ) 28%, var( --color-surface ) 72%, var( --color-neutral-0 ) 72% );
		display: inline-block;
		border-radius: 2px;

		.button {
			background-color: transparent;
		}
	}

}

@keyframes button__busy-animation {
	0% {
		background-position: 240px 0;
	}
}
